import React, {Component} from 'react';
import {connect} from 'dva';
import Affix from '../../../../component/Affix';
import NoSelect from '../../../../component/NoSelect';
import SelectButton from '../../../../component/SelectButton';
import style from './css/Float.css';

class Float extends Component {
	
	render() {
		let {state: {labelList=[], filter: {labelIdMap={}}}, dispatch} = this.props;
		if(labelList.length == 0) {
			return null;
		}
		let labelNodes = [];
		for(let label of labelList) {
			let {labelId, labelName} = label;
			let selected = labelIdMap[labelId];
			labelNodes.push(
				<SelectButton 
				key={labelId} 
				selected={selected}
				onClick={() => {
					dispatch({
						type: 'home/filterLabelIdMap',
						labelId: labelId,
						currentSelected: selected,
					});
				}}>
					{labelName}
				</SelectButton>
			);
		}
		return (
			<Affix className={style.floatContainer}>
				<NoSelect>
					<div className={style.floatHead}>
						标签
					</div>
					<div className={style.floatBody}>
						{labelNodes}
					</div>
				</NoSelect>
			</Affix>
		);
	}
	
}

export default connect((state) => ({
	state: {
		...state.home,
		loading: state.loading.models.home
	}
}))(Float);